<template>
  <div class="rst-content-body">
    <template v-for="item in dataList" :key="item.id">
      <div class="rst-user" @click="bindTeam(item)">
        <image class="user-img" :src="item.referenceImage" mode="aspectFit"></image>
        <div class="time-txt">
          <div class="time">
            <div class="time-txt">
              {{ item.time || item.createTime }}
            </div>
            <div class="del-icon" @click.stop="bindDel(item)">
              <image class="del-image" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%20663%402x.png" mode="aspectFit"></image>
            </div>
          </div>
          <div class="txt-right">
            <div class="ta txt">{{ item.prompt }}</div>
            <div class="right-icon">
              <image class="right-image" src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x%20%281%29.png" mode="aspectFit"></image>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div style="padding: 20rpx 0;">
      <u-loadmore :status="status" style="padding: 20rpx 0;"/>
    </div>
    <AIMessage ref="aiMessageRef" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue';
import { delAi, getAiList } from '@/api/designApi';
import AIMessage from '@/pages/ai/component/AIMessage.vue';
import { useRouter } from 'uni-mini-router';
import { onReachBottom, onPullDownRefresh, onLoad } from '@dcloudio/uni-app';

const status = ref<string>('loadmore');
const pageNum = ref(1);
const paging = shallowRef(null);
const dataList = shallowRef([]);
const total = ref(0);

function queryList() {
  const params = {
    pageNum: pageNum.value,
    pageSize: 10,
  };
  // 此处请求仅为演示，请替换为自己项目中的请求
  getAiList(params).then((res) => {
    // console.log('getAiList', res);

    if (pageNum.value === 1) {
      dataList.value = res.data.content;
    } else {
      dataList.value = dataList.value.concat(res.data.content);
    }

    total.value = res.data.totalElements;
    if (res.data.totalElements > dataList.value.length) {
      status.value = 'loading';
    } else {
      status.value = 'nomore';
    }
    pageNum.value = pageNum.value + 1;
  });
}

const bindDel = (item) => {
  delAi({ id: item.id })
    .then((res) => {
      dataList.value = dataList.value.filter((x) => x.id !== item.id);
      uni.showToast({ title: '删除成功', icon: 'none' });
    })
    .catch((err) => {
      uni.showToast({ title: '删除失败', icon: 'none' });
    });
};

const router = useRouter();

const aiMessageRef = shallowRef(null);
const bindTeam = (item) => {
  router.push({
    path: '/pages/ai/detail/detail?id=' + item.id,
    query: {
      id: item.id,
    },
  });
};

onLoad(() => {
  queryList();
});

// 页面上拉触底事件处理
onReachBottom(() => {
  queryList();
});
onPullDownRefresh(() => {
  pageNum.value = 1;
  queryList();
});
</script>

<style scoped lang="scss">
.rst-content-body {
  .rst-user {
    padding: 20rpx 32rpx;
    display: flex;
    gap: 24rpx;
    max-height: 200rpx;
    border-bottom: 2rpx solid #e4e4e4;
    background: #ffffff;
    .user-img {
      flex-shrink: 0;
      width: 108rpx;
      height: 108rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }
    .time-txt {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      flex: 1;
      .time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
        font-size: 24rpx;
        color: #6f6f6f;
        line-height: 32rpx;
        .del-icon {
          padding: 0 0 0 20rpx;
          .del-image {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }

      .txt-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        .right-icon {
          flex-shrink: 0;
          padding: 0 0 0 20rpx;
          margin-left: auto;
          .right-image {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      .txt {
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
        line-height: 34rpx;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 限制行数为2 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .rst-ai {
    margin: 10rpx 32rpx;
    background: #f3f7f8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 16rpx;
    .ai-tip {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
      margin: 16rpx 0 20rpx;
    }
    .rst-img {
      width: 500rpx;
      margin: auto;
    }
  }
}
</style>
